<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    style="width: 420px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form :model="form" label-position="top">
      <el-form-item label="课程名称" :label-width="formLabelWidth">
        <el-input v-model="form.courseName" disabled autocomplete="off" />
      </el-form-item>
      <el-form-item label="章节名称" :label-width="formLabelWidth">
        <el-input v-model="form.chapterName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="章节描述" :label-width="formLabelWidth">
        <el-input
          v-model="form.description"
          autocomplete="off"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="章节排序" :label-width="formLabelWidth">
        <el-input-number v-model="form.sort" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button style="color: #606266" @click="dialogFormVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { courseInfoData } from '@/api/course/type'
import { getChapterById, saveOrUpdateChapter } from '@/api/course/index'
//获取骨架的小仓库
// import useLayOutSettingStore from '@/store/modules/setting'
// let layOutSettingStore = useLayOutSettingStore()

const dialogFormVisible = ref(false)
const formLabelWidth = '100px'
const title = ref('')

//注意，这里加了小括号，不用return直接返回就是这个对象
const initData = () => ({
  id: undefined as number | undefined,
  course_id: 0,
  courseName: '',
  chapterName: '',
  description: '',
  sort: 0,
  status: 0
})

const form = ref(initData())

//dialog弹出时执行的方法
const showAndInit = async (
  courseInfo: courseInfoData,
  chapterId: number | undefined
) => {
  console.log(courseInfo, 'courseInfo')
  //每次显示对话框，都先恢复为默认空值
  form.value = initData()
  if (chapterId) {
    title.value = '编辑章节'
    //获取要编辑的章节信息
    const { data } = await getChapterById(chapterId)
    // console.log(data)
    let { id, chapterName, course_id, description, sort } = data
    Object.assign(form.value, {
      id,
      course_id,
      chapterName,
      description,
      sort
    })
    //  console.log(form.value)
  } else {
    title.value = '添加章节'
    console.log(form.value)
  }

  form.value.courseName = courseInfo.title
  form.value.course_id = courseInfo.id!

  console.log(form.value)

  dialogFormVisible.value = true
}

//事件给父组件的消息
const emits = defineEmits<{
  (e: 'chapterRefresh'): void
}>()

//表单提交事件
const onSubmit = async () => {
  // console.log(form.value)
  const res = await saveOrUpdateChapter(form.value)
  if (res.code === 0) {
    dialogFormVisible.value = false
    ElMessage({
      type: 'success',
      message: `${title.value}成功！`
    })
    emits('chapterRefresh')
    // setTimeout(function () {
    //   layOutSettingStore.refsh = !layOutSettingStore.refsh
    // }, 1000)
  } else {
    ElMessage({
      type: 'error',
      message: `${title.value}失败...！`
    })
  }
}

defineExpose({
  showAndInit
})
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-input {
  width: 100%;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
